<template>
  <el-dialog :visible.sync="isShow"  class="dialog-detail"   @close="handleClose"  center top="14vh" width="756px" append-to-body :fullscreen="fullscreen">
    <img class="dialog-close" src="./img/close.png" alt="" @click="$emit('update:visible',false)">
    <el-table stripe ref="passTable" :border="false" height="350px" :data="passModel">

      <el-table-column :label="$t('cockpit.serialNumber')" align="center" type="index" width="80" />
      <el-table-column :label="$t('cockpit.defectName')" align="left" prop="minFlawName"  />
      <el-table-column :label="$t('cockpit.appearanceTime')" align="left" prop="createTime"  :show-overflow-tooltip="true" />
      <el-table-column :label="$t('cockpit.theBatch')" align="left" prop="lot"  :show-overflow-tooltip="true" />
    </el-table>
  </el-dialog>
</template>
<script>


import { uploadFile }  from '@/api/file/file'
import { qualifiedChartDetails} from '@/api/inspectionManagement/inspectionManagement'

export default {
  name: 'dialog-sign',
  // components:{EnjoySelectUser,EnjoySelectDeptTree,FileUploadInput},
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    data:Object,
    type:[String,Number] //1:新增  2：编辑 3：查看
  },
  watch: {
    visible(val) {
      if(val){
        this.getList();
      }
    }
  },
  computed:{
    isShow:{
      get(){
        return this.visible
      },
      set(){},
    },
    headerTitle(){
      return '签名';
    }
  },
  data(){
    return {
      isCrop: false,
      lineWidth: 6,
      passModel:[],
      lineColor: 'black',
      bgColor:'rgba(230,230,230,0.5000)',
      loading:false,
      fullscreen: false,
      deviceOptions:undefined,
      factoryOptions:undefined,
      dialogForm:{},
      queryParams:{
        "dateType": "1",
        "factoryCode": [],
        "startTime": "2023-05-01",
        "endTime": "2023-06-30",
      },
      // 表单校验
      rules: {
        // aaa: [
        //   { required: true, message: "厂区类型不能为空", trigger: "blur" }
        // ],
      },
    }
  },

  methods:{
    getList(){
      qualifiedChartDetails({...this.queryParams,...this.data}).then(res=>{
        this.passModel = res.data.classFlaws
      })
    },
    /** 发起提交 */
    submitForm: function() {
     this.loading = true
      this.$refs.esign.generate().then(res => {
         const file = this.dataURItoBlob(res)
        let formData = new FormData()
        formData.append("file",file);
        formData.append("bizId",this.data?.id||'');
        formData.append("bizType",'SampleBookType');
        uploadFile(formData).then(res=>{
          this.loading = false
          //...
          // this.updateFormData(res.data.url)

          this.$emit('submit',res.data)
          this.$emit('update:visible',false)
        })
      },()=>{
        this.loading = false
      })
    },
    dataURItoBlob(base64Data) {
      var byteString;
      if(base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
      else{
        byteString = unescape(base64Data.split(',')[1]);
      }
      var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
      var ia = new Uint8Array(byteString.length);
      for(var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      var blob = new Blob([ia], {
        type: mimeString
      });
      return blob;
    },
    handleClose(done) {
      this.$emit('update:visible',false)
    },
  }
}
</script>

<style scoped lang="scss">

.dialog-detail{
  /*斑马纹*/
  ::v-deep .el-table--enable-row-hover {

    tr:hover td.el-table__cell{
      background-color: transparent!important;
    }

  }
  ::v-deep .el-table--striped .el-table__body {
    .el-table__cell{
      border:none
    }

    tr.el-table__row--striped{
      td.el-table__cell {
        background-color: rgba(255,255,255,0.1)!important;
        border:none;
      }

    }
  }
  ::v-deep .el-dialog{
    overflow: visible;
  }
  ::v-deep .el-table__empty-text{
    color:white;
  }
  ::v-deep .el-table{
    border: none;
    background-color: rgba(255,255,255,.1);
    &:before{
      height: 0;
    }
    tr{
      background-color: transparent;
      .cell{
        color:white;
      }
    }
    th{
      background-color: transparent!important;
      border: none;
    }
  }
  .dialog-close{
    position: absolute;
    top:-32px;
    right: -2px;
    opacity: 0.95;
    &:hover{
      cursor: pointer;
    }
  }

  ::v-deep .el-dialog__header{
    display: none;
  }
  ::v-deep .el-dialog__body{
    padding:0 8px;
    background: linear-gradient(180deg, #1AB2F3 0%, #0B7BE3 100%);
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.5);
    border-radius: 4px;
  }
}
</style>
